<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<audio autoplay="autoplay" src="mp3/烟花易冷.mp3">
			</audio>
		<canvas id="MyCanvas" width="1350" height="600"></canvas>
		<script type="text/javascript">
			
			var canvas = document.getElementById("MyCanvas");
			var ctx = canvas.getContext("2d");
			
			var arcArr = [
//			    [20, 100, 10, 3, 0,"blue"],
//			    [20, 100, 10, 5, 5,"orange"],
//			    [20, 100, 10, 7, 5,"yellow"]
			];
			
			setInterval(function() {
				for (var i = 0; i < 85; i++){
				     var vx = parseInt(Math.random() * 6) + 1;
                     if(Math.random() > 0.5){
                     	 vx = -vx;
               }
                   var vy = Math.random() * 20 + 15;
			       var r = parseInt(Math.random() * 256);
			       var g = parseInt(Math.random() * 256);
			       var b = parseInt(Math.random() * 256);
			   arcArr.push([650, 600, 8, vx, -vy, "rgb( "+ r +"," + g +"," + b +")"]);
              }
			},1000);
			
			setInterval(function() {
				ctx.fillStyle = "rgba(205,175,120,0.3)";
				ctx.fillRect(0, 0, 1350, 600);
				
				for (var i = 0; i < arcArr.length; i++){									
				ctx.beginPath();
				ctx.fillStyle = arcArr[i][5];

				ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
				ctx.fill();
				arcArr[i][0] = arcArr[i][0] + arcArr[i][3];
			    arcArr[i][1] = arcArr[i][1] + arcArr[i][4];
			    arcArr[i][2] = arcArr[i][2] - Math.random() * 0.1;
			    arcArr[i][4] = arcArr[i][4] + 0.6;
			    if(arcArr[i][2] < Math.random() * 4){
			    	arcArr.splice(i, 1);
			    }
			    
			     
			     if(arcArr[i][1] > 600 - arcArr[i][2]){
			        arcArr[i][4] = -arcArr[i][4];
			        arcArr[i][4] = arcArr[i][4] * 0.5;
			        arcArr[i][1] = 600 - arcArr[i][2];
			     }
			     
			     ctx.beginPath();
			    ctx.fillStyle="brown";
			    ctx.lineTo(600,550);
			    ctx.lineTo(700,550);
			    ctx.lineTo(700,600);
			    ctx.lineTo(600,600);
			    ctx.closePath();
			    ctx.fill();
			    ctx.stroke();
			    ctx.closePath();

//			     if(arcArr[i][0] > 1350 - arcArr[i][2]){
//			        arcArr[i][3] = -arcArr[i][3];
//			        arcArr[i][0] = 1350 - arcArr[i][2];
//			     }
//			     
//			     if(arcArr[i][0] < arcArr[i][2]){
//			     	arcArr[i][3] = -arcArr[i][3];
//			     	arcArr[i][0] = arcArr[i][2];
//			     }
                }
			},16);
		</script>
	</body>
</html>
